<template>
	<view class="page">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="title">消息</view>
			<view class="header-actions">
				<image
					src="/static/svg/search.svg"
					class="search-icon"
					@tap="showSearch"
				/>
				<view class="more-btn" @tap="showMoreActions">
					<image src="/static/svg/more.svg" class="more-icon" />
				</view>
			</view>
		</view>

		<!-- 消息分类 -->
		<view class="message-categories">
			<view
				v-for="(category, index) in categories"
				:key="index"
				:class="['category-item', { active: currentCategory === index }]"
				@tap="switchCategory(index)"
			>
				<view class="category-icon">
					<image :src="category.icon" class="icon" />
					<view v-if="category.unread > 0" class="unread-badge">{{ category.unread }}</view>
				</view>
				<text class="category-name">{{ category.name }}</text>
			</view>
		</view>

		<!-- 消息列表 -->
		<view class="message-list">
			<message-item
				v-for="message in currentMessages"
				:key="message.id"
				:message="message"
				@tap="openMessage"
				@longpress="showMessageActions"
			/>
		</view>

		<!-- 消息操作弹窗 -->
		<message-actions
			:visible="showActions"
			:message="selectedMessage"
			@close="hideMessageActions"
			@markAsRead="markMessageAsRead"
			@markAsUnread="markMessageAsUnread"
			@delete="deleteMessage"
			@report="reportMessage"
		/>

		<!-- 搜索组件 -->
		<message-search
			:visible="showSearchModal"
			:messages="messages"
			@close="hideSearch"
			@select="openMessage"
		/>

		<!-- 空状态 -->
		<view v-if="currentMessages.length === 0" class="empty-state">
			<image src="/static/svg/comment.svg" class="empty-icon" />
			<text class="empty-text">暂无消息</text>
		</view>
				<!-- 自定义底部导航 -->
		<bottom-nav />
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import MessageItem from './components/MessageItem.vue'
import MessageActions from './components/MessageActions.vue'
import MessageSearch from './components/MessageSearch.vue'
import BottomNav from "../home/components/BottomNav.vue";

// 消息分类
const categories = ref([
	{
		name: '全部',
		icon: '/static/svg/comment.svg',
		unread: 5
	},
	{
		name: '系统',
		icon: '/static/svg/home.svg',
		unread: 2
	},
	{
		name: '互动',
		icon: '/static/svg/heart.svg',
		unread: 3
	},
	{
		name: '通知',
		icon: '/static/svg/gift.svg',
		unread: 0
	}
])

// 当前选中的分类
const currentCategory = ref(0)

// 消息操作相关
const showActions = ref(false)
const selectedMessage = ref({})

// 搜索相关
const showSearchModal = ref(false)

// 模拟消息数据
const messages = ref([
	{
		id: 1,
		type: 'system',
		sender: '系统消息',
		avatar: '/static/svg/home.svg',
		preview: '您的活动申请已通过审核，可以开始活动了！',
		time: new Date(Date.now() - 30 * 60 * 1000), // 30分钟前
		read: false,
		status: 'offline',
		category: 'system'
	},
	{
		id: 2,
		type: 'user',
		sender: '小明',
		avatar: '/static/svg/avatar-male.svg',
		preview: '今天的跑步活动很棒，期待下次一起！',
		time: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2小时前
		read: false,
		status: 'online',
		category: 'interaction',
		unreadCount: 2
	},
	{
		id: 3,
		type: 'user',
		sender: '小红',
		avatar: '/static/svg/avatar-female.svg',
		preview: '感谢分享的健身经验，对我很有帮助！',
		time: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5小时前
		read: true,
		status: 'offline',
		category: 'interaction'
	},
	{
		id: 4,
		type: 'system',
		sender: '活动通知',
		avatar: '/static/svg/gift.svg',
		preview: '您关注的"周末徒步"活动即将开始，记得准时参加！',
		time: new Date(Date.now() - 12 * 60 * 60 * 1000), // 12小时前
		read: false,
		status: 'offline',
		category: 'notification'
	},
	{
		id: 5,
		type: 'user',
		sender: '健身达人',
		avatar: '/static/svg/avatar-male.svg',
		preview: '分享了一篇关于健康饮食的文章',
		time: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1天前
		read: true,
		status: 'offline',
		category: 'interaction'
	}
])

// 根据当前分类筛选消息
const currentMessages = computed(() => {
	if (currentCategory.value === 0) {
		return messages.value
	}

	const categoryMap = {
		1: 'system',
		2: 'interaction',
		3: 'notification'
	}

	const targetCategory = categoryMap[currentCategory.value]
	return messages.value.filter(msg => msg.category === targetCategory)
})

// 切换分类
const switchCategory = (index) => {
	currentCategory.value = index
}

// 格式化时间
const formatTime = (time) => {
	const now = new Date()
	const diff = now - time
	const minutes = Math.floor(diff / 60000)
	const hours = Math.floor(diff / 3600000)
	const days = Math.floor(diff / 86400000)

	if (minutes < 1) return '刚刚'
	if (minutes < 60) return `${minutes}分钟前`
	if (hours < 24) return `${hours}小时前`
	if (days < 7) return `${days}天前`

	return time.toLocaleDateString('zh-CN', {
		month: 'short',
		day: 'numeric'
	})
}

// 打开消息详情
const openMessage = (message) => {
	// 标记为已读
	message.read = true
	updateUnreadCount()

	// 这里可以跳转到消息详情页面
	uni.showToast({
		title: `打开${message.sender}的消息`,
		icon: 'none'
	})
}

// 显示消息操作菜单
const showMessageActions = (message) => {
	selectedMessage.value = message
	showActions.value = true
}

// 隐藏消息操作菜单
const hideMessageActions = () => {
	showActions.value = false
	selectedMessage.value = {}
}

// 标记消息为已读
const markMessageAsRead = (message) => {
	message.read = true
	updateUnreadCount()
	uni.showToast({
		title: '已标记为已读',
		icon: 'success'
	})
}

// 标记消息为未读
const markMessageAsUnread = (message) => {
	message.read = false
	updateUnreadCount()
	uni.showToast({
		title: '已标记为未读',
		icon: 'success'
	})
}

// 删除消息
const deleteMessage = (message) => {
	const index = messages.value.findIndex(msg => msg.id === message.id)
	if (index > -1) {
		messages.value.splice(index, 1)
		updateUnreadCount()
		uni.showToast({
			title: '消息已删除',
			icon: 'success'
		})
	}
}

// 举报消息
const reportMessage = (message) => {
	// 这里可以调用举报接口
	console.log('举报消息:', message)
}

// 更新未读消息数量
const updateUnreadCount = () => {
	// 重新计算每个分类的未读消息数量
	const unreadAll = messages.value.filter(msg => !msg.read).length
	const unreadSystem = messages.value.filter(msg => !msg.read && msg.category === 'system').length
	const unreadInteraction = messages.value.filter(msg => !msg.read && msg.category === 'interaction').length
	const unreadNotification = messages.value.filter(msg => !msg.read && msg.category === 'notification').length

	categories.value[0].unread = unreadAll
	categories.value[1].unread = unreadSystem
	categories.value[2].unread = unreadInteraction
	categories.value[3].unread = unreadNotification
}

// 显示搜索
const showSearch = () => {
	showSearchModal.value = true
}

// 隐藏搜索
const hideSearch = () => {
	showSearchModal.value = false
}

// 显示更多操作
const showMoreActions = () => {
	uni.showActionSheet({
		itemList: ['全部标记已读', '消息设置', '清空消息'],
		success: (res) => {
			switch(res.tapIndex) {
				case 0:
					markAllAsRead()
					break
				case 1:
					showMessageSettings()
					break
				case 2:
					clearAllMessages()
					break
			}
		}
	})
}

// 全部标记已读
const markAllAsRead = () => {
	messages.value.forEach(message => {
		message.read = true
	})
	updateUnreadCount()
	uni.showToast({
		title: '已全部标记为已读',
		icon: 'success'
	})
}

// 消息设置
const showMessageSettings = () => {
	uni.showToast({
		title: '消息设置功能开发中',
		icon: 'none'
	})
}

// 清空消息
const clearAllMessages = () => {
	uni.showModal({
		title: '确认清空',
		content: '确定要清空所有消息吗？此操作不可恢复。',
		success: (res) => {
			if (res.confirm) {
				messages.value = []
				updateUnreadCount()
				uni.showToast({
					title: '消息已清空',
					icon: 'success'
				})
			}
		}
	})
}

onMounted(() => {
	// 页面加载时的初始化操作
	console.log('消息页面已加载')
})
</script>

<style scoped>
.page {
	padding: 0;
	padding-bottom: 90px;
	min-height: 100vh;
	background: #f8f9fa;
}

/* 顶部导航 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: white;
	border-bottom: 1px solid #eee;
}

.title {
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 15px;
}

.search-icon, .more-icon {
	width: 24px;
	height: 24px;
}

.more-btn {
	padding: 5px;
}

/* 消息分类 */
.message-categories {
	display: flex;
	justify-content: space-around;
	padding: 20px 10px;
	background: white;
	margin-bottom: 10px;
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	border-radius: 12px;
	transition: all 0.3s ease;
}

.category-item.active {
	background: #e8f4fd;
}

.category-icon {
	position: relative;
	margin-bottom: 8px;
}

.category-icon .icon {
	width: 28px;
	height: 28px;
	opacity: 0.8;
}

.category-item.active .icon {
	opacity: 1;
}

.unread-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background: #ff4757;
	color: white;
	font-size: 12px;
	padding: 2px 6px;
	border-radius: 10px;
	min-width: 18px;
	text-align: center;
	line-height: 1.2;
}

.category-name {
	font-size: 13px;
	color: #666;
}

.category-item.active .category-name {
	color: #1890ff;
	font-weight: 500;
}

/* 消息列表 */
.message-list {
	background: white;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
}

.empty-icon {
	width: 80px;
	height: 80px;
	opacity: 0.3;
	margin-bottom: 20px;
}

.empty-text {
	font-size: 16px;
	color: #999;
}
</style>
